<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <link rel="stylesheet" href="./index.css" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;400&display=swap"
      rel="stylesheet"
    />

    <title>Frontend Mentor | NFT preview card component</title>
  </head>

  <body>
    <div class="Container">
      <div class="image">
        <img src="./images/image-equilibrium.jpg" class="imagepng" />
        <div class="hoverimage">
          <img src="./images/icon-view.svg" class="hoverpng">
        </div>
      </div>

      <div class="title">Equilibrium #3429</div>

      <div class="description">
        Our Equilibrium collection promotes balance and calm.
      </div>

      <div class="price">
        <p class="eth">
          <img src="./images/icon-ethereum.svg" class="ethsvg" />
          0.041 ETH
        </p>
        <p class="time">
          <img src="./images/icon-clock.svg" class="clocksvg" />
          3 days left
        </p>
      </div>

      <hr />

      <div class="creator">
        <img src="./images/image-avatar.png" alt="" />
        <p class="creatorInfo">Creation of <p class="creatorName">Jules Wyvern</p></p>
      </div>
    </div>

    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Nick</a>.
    </div>
  </body>
</html>
